<template>
  <div id="sys">
    <div class="sys-top">
      <bread-crumb></bread-crumb>
    </div>
    <div class="sys-bar">
      <left-bar></left-bar>
    </div>
    <div class="sys-center">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import leftbar from "../components/leftBar.vue";
import breadCrumb from "../components/breadCrumb.vue";

export default {
  name: "system",
  components: {
    "left-bar": leftbar,
    "bread-crumb": breadCrumb
  }
};
</script>

<style>
#sys {
  position: absolute;
  width: 100%;
  height: 100%;
}
.sys-top {
  position: absolute;
  top: 0%;
  right: 0%;
  left: 240px;
  height: 80px;
  background-color: aquamarine;
}

.sys-bar {
  position: absolute;
  left: 0%;
  top: 0%;
  height: 100%;
  width: 240px;
  background-color: rgb(48, 65, 86);
}

.sys-center {
  position: absolute;
  top: 90px;
  left: 250px;
  right: 0%;
  bottom: 0%;
}
</style>